<template>
    <div class="rotary-table" :style="styleSize"
         :class="[
                    rotaryStyle === 'blue' ? 'rotary-style-1-blue' : 'rotary-style-1-golden',
                    rotaryXd === '2d' ? 'rotary-style-1-2d' : 'rotary-style-1-3d'
                 ]"
    >
        <div class="rotary-layer layer-01" :style="styleSize"></div>
        <div class="rotary-layer layer-02" :style="styleSize"></div>
        <div class="rotary-layer layer-03" :style="styleSize"></div>
        <div class="rotary-layer layer-04" :style="styleSize"></div>
        <div class="rotary-layer layer-05" :style="styleSize"></div>
        <div class="rotary-layer layer-06" :style="styleSize"></div>
        <div class="rotary-layer layer-07" :style="styleSize"></div>
        <div class="rotary-layer layer-08" :style="styleSize"></div>
    </div>
</template>

<script>
    export default {
        name: "RotaryTable",
        props: {
            rotaryStyle: String,
            rotaryXd: String,
            size: String
        },
        computed: {
            styleSize() {
                return "width: " + this.size + "px; height: " + this.size + "px;"
            }
        }
    }
</script>